<template>
  <div class="ppt-image-preview">
    <!-- 预览弹窗 -->
    <el-dialog
      title="PPT 预览"
      :visible.sync="openWindow"
      :fullscreen="isFullscreen"
      :modal="false"
      :close-on-click-modal="false"
      @close="$emit('update:showView',false)"
      width="600px"
      top="10px"
    >
      <!-- 工具栏：分页、缩放、全屏 -->
      <div class="toolbar">
        <el-button
          icon="el-icon-zoom-in"
          @click="zoomIn"
          size="mini"
        ></el-button>
        <el-button
          icon="el-icon-zoom-out"
          @click="zoomOut"
          size="mini"
        ></el-button>
        <el-button
          icon="el-icon-full-screen"
          @click="toggleFullscreen"
          size="mini"
        ></el-button>

        <div class="page-control">
          <el-select
            v-model="currentPage"
            :options="pageOptions"
            @change="handlePageChange"
            size="mini"
            style="width: 100px;"
          ></el-select>
          <span class="page-info">
            共 {{ totalPages }} 页
          </span>
        </div>
      </div>

      <!-- 轮播组件展示图片 -->
      <el-carousel
        ref="carousel"
        :current-index="currentPage - 1"
        :loop="false"
        indicator-position="none"
        @change="handleCarouselChange"
        class="carousel-container"
      >
        <el-carousel-item v-for="(img, index) in pptImages" :key="index">
          <div class="image-wrapper">
            <img
              :src="img"
              :alt="`第 ${index + 1} 页`"
              class="ppt-image"
              :style="{ transform: `scale(${scale})` }"
              @load="handleImageLoad(index)"
              @error="handleImageError(index)"
            >
            <!-- 加载失败提示 -->
            <div class="load-error" v-if="errorPages.includes(index)">
              <el-icon></el-icon>
              <span>图片加载失败</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {  },
  props: {
    // 父组件传入的 PPT 图片 URL 列表（必传）
    imageList: {
      type: Array,
      required: true,
      default: () => []
    },
    showView: {
      type: Boolean,
      required: true,
    }
  },
  data() {
    return {
      openWindow: this.showView,
      currentPage: 1, // 当前页码
      scale: 1, // 缩放比例
      isFullscreen: false, // 是否全屏
      errorPages: [], // 加载失败的页码索引
      // 分页选项（用于下拉选择页码）
      pageOptions() {
        return this.imageList.map((_, index) => ({
          label: `第 ${index + 1} 页`,
          value: index + 1
        }));
      }
    };
  },
  computed: {
    totalPages() {
      return this.imageList.length; // 总页数 = 图片数量
    },
    pptImages() {
      // 处理图片 URL（若需要添加域名等）
      return this.imageList.map(img => {
        // 示例：若图片是相对路径，添加基础域名
        if (img.startsWith('/')) {
          return process.env.VUE_APP_BASE_API + img;
        }
        return img;
      });
    }
  },
  methods: {
    // 轮播页切换时更新页码
    handleCarouselChange(index) {
      this.currentPage = index + 1;
    },

    // 下拉选择页码切换
    handlePageChange(page) {
      this.currentPage = page;
      // 同步轮播组件的当前页
      this.$refs.carousel.setActiveItem(page - 1);
    },

    // 放大
    zoomIn() {
      if (this.scale < 2) { // 限制最大缩放 2 倍
        this.scale += 0.1;
      }
    },

    // 缩小
    zoomOut() {
      if (this.scale > 0.5) { // 限制最小缩放 0.5 倍
        this.scale -= 0.1;
      }
    },

    // 切换全屏
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },

    // 图片加载成功
    handleImageLoad(index) {
      // 移除错误状态
      this.errorPages = this.errorPages.filter(i => i !== index);
    },

    // 图片加载失败
    handleImageError(index) {
      this.errorPages.push(index);
    }
  },
  watch: {
    // 图片列表变化时重置状态
    imageList() {
      this.currentPage = 1;
      this.scale = 1;
      this.errorPages = [];
    }
  }
};
</script>

<style scoped>
.ppt-image-preview {
  display: inline-block;
}

/* 弹窗工具栏 */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 5px 0;
}

.page-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-info {
  color: #666;
  font-size: 14px;
}

/* 轮播容器 */
.carousel-container {
  width: 100%;
  min-height: 500px;
  overflow: hidden;
}

/* 图片容器 */
.image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  position: relative;
}

/* PPT 图片样式 */
.ppt-image {
  transition: transform 0.3s ease;
  max-width: 100%;
  max-height: 500px; /* 限制最大高度，避免超出屏幕 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* 加载失败提示 */
.load-error {
  position: absolute;
  color: #f56c6c;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}
</style>
